<template>
  <div
    class="vaw-side-bar-wrapper"
    :style="{ borderRadius: '0px', marginTop: appStore.layoutMode === 'ttb' ? '48px' : 0 }"
    :class="[!appStore.isCollapse ? 'open-status' : 'close-status', bgColor]"
  >
    <ScrollerMenu :routes="permissionStore.getPermissionSideBar" />
    <!-- 新增：底部收起/展开按钮 -->
    <div class="sidebar-fold-btn" v-if="appStore.layoutMode === 'ltr'">
      <Humburger />
    </div>
  </div>
</template>

<script lang="ts">
  import useAppConfigStore from '@/store/modules/app-config'
  import usePermissionStore from '@/store/modules/permission'
  import { SideTheme } from '@/store/types'
  import { computed, defineComponent } from 'vue'
  export default defineComponent({
    name: 'SideBar',
    props: {
      showLogo: {
        type: Boolean,
        default: true,
      },
    },
    setup() {
      const permissionStore = usePermissionStore()
      const appStore = useAppConfigStore()
      const bgColor = computed(() => {
        if (appStore.sideTheme === SideTheme.IMAGE) {
          return 'sidebar-bg-img'
        } else if (appStore.sideTheme === SideTheme.DARK) {
          return 'sidebar-bg-dark'
        } else {
          return 'sidebar-bg-light'
        }
      })
      return {
        appStore,
        permissionStore,
        bgColor,
      }
    },
  })
</script>

<style scoped lang="less">
  .sidebar-bg-img {
    background-image: url('../../assets/bg_img.webp') !important;
    background-size: cover;
    :deep(.logo-wrapper .logo-title) {
      color: #fff !important;
    }
    :deep(.arco-menu) {
      background-color: transparent !important;
    }
    :deep(.arco-menu-inline-header) {
      background-color: transparent !important;
    }
    :deep(.arco-menu-dark .arco-menu-pop-header) {
      background-color: transparent !important;
    }
    :deep(.arco-menu-item) {
      background-color: transparent !important;
    }
    :deep(.arco-menu-dark .arco-menu-item.arco-menu-selected) {
      color: rgb(var(--primary-6));
      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
    :deep(.arco-menu-dark .arco-menu-inline-header:hover) {
      color: rgb(var(--primary-6)) !important;
      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
    :deep(.arco-menu-dark .arco-menu-pop-header:hover) {
      color: rgb(var(--primary-6)) !important;
      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
  }
  .sidebar-bg-dark {
    background-color: var(--color-menu-dark-bg);
    :deep(.logo-wrapper .logo-title) {
      color: #fff !important;
    }
    :deep(.arco-menu-dark .arco-menu-item.arco-menu-selected) {
      color: var(--color-white);
      background-color: rgba(var(--primary-6), 0.3);
      & .arco-menu-icon {
        color: var(--color-white) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
    :deep(
        .arco-menu-dark .arco-menu-item:hover,
        .arco-menu-dark .arco-menu-group-title:hover,
        .arco-menu-dark .arco-menu-pop-header:hover,
        .arco-menu-dark .arco-menu-inline-header:hover
      ) {
      color: var(--color-white) !important;
      & .arco-menu-icon {
        color: var(--color-white) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
    :deep(.arco-menu-dark .arco-menu-inline-header:hover) {
      color: rgb(var(--primary-6)) !important;
      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
    :deep(.arco-menu-dark .arco-menu-pop-header:hover) {
      color: rgb(var(--primary-6)) !important;
      & .arco-menu-icon {
        color: rgb(var(--primary-6)) !important;
        & .arco-icon {
          color: currentColor !important;
        }
      }
    }
  }
  .sidebar-bg-light {
    background-color: #fff;
  }
  .vaw-side-bar-wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    height: 100%;
    box-sizing: border-box;
    z-index: 999;
    transition: width 0.3s ease; /* 添加宽度过渡动画 */
    &.open-status {
      width: 220px !important; /* 测试用值 */
    }
    &.close-status {
      width: 66px !important; /* 测试用值 */
    }
  }
  //.open-status {
  //  width: @menuWidth; /* 展开状态宽度 */
  //  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.12);
  //  transition: all @transitionTime;
  //}
  //
  //.close-status {
  //  width: @minMenuWidth; /* 折叠状态宽度 */
  //  box-shadow: none;
  //  transition: all @transitionTime;
  //}

  /* 菜单内容区 */
  :deep(.scroller-menu) {
    flex: 1; /* 占据剩余空间 */
    overflow-y: auto; /* 内容过多时滚动 */
  }

  /* 底部收起/展开按钮 */
  .sidebar-fold-btn {
    display: flex;
    justify-content: center;
    padding: 12px 0;
    background: #fff;
    border-top: 1px solid var(--color-border-light); /* 顶部边框分隔 */

    /* 鼠标悬停效果 */
    &:hover {
      background-color: var(--color-secondary-hover);
    }

    /* 适配深色主题 */
    .fold-wrapper {
      color: #667085;
      &:hover {
        color: #1d2129;
      }
    }
  }

  .close-status :deep(.arco-menu-item-text) {
    display: none;
  }

  .close-status :deep(.arco-menu-item) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .close-status :deep(.arco-menu-submenu-title) {
    justify-content: center;
  }

  .close-status :deep(.arco-menu-submenu-title .arco-menu-icon) {
    margin-right: 0 !important;
  }

  .close-status .sidebar-fold-btn .tip-text {
    display: none;
  }

  .is-mobile .sidebar-fold-btn {
    display: none;
  }
</style>
